<template>
    <div class="inbox" ref="mianHeight">
        <div class="inboxM">
            <el-tabs v-model="activeName" :tab-position="tabPosition" @tab-click="handleClick">
                <el-tab-pane label="全部" name="2">
                        <inbox-tab ref="all" :scHeight="scHeight" :isRead="2"></inbox-tab>
                </el-tab-pane>
                <el-tab-pane label="未读" name="0">
                    <inbox-tab ref="no" :scHeight="scHeight" :isRead="0"></inbox-tab>
                </el-tab-pane>
                <el-tab-pane label="已读" name="1">
                    <inbox-tab ref="yes" :scHeight="scHeight" :isRead="1"></inbox-tab>
                </el-tab-pane>
            </el-tabs>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
import inboxTab from "./inboxTab"

export default {
    name:'inbox',
    data() {
        return {
            activeName:'2',
            tabPosition:'top',
            scHeight:'',
        }
    },
    components:{
        inboxTab:inboxTab
    },
    mounted() {
        this.setheight();
        this.$refs.all.Initialization();
    },
    methods:{
      handleClick(val){
       if(val.name == "2"){
           this.$refs.all.Initialization();
       }
       if(val.name == "0"){
           this.$refs.no.Initialization();
       }
       if(val.name == "1"){
           this.$refs.yes.Initialization();
       }
      },
      setheight:function(){ //设置页面高度
          let me = this;
          let thisheight= window.getComputedStyle(me.$refs.mianHeight).height;
          let scHeight = parseInt(thisheight)-200+"px";
          me.scHeight = scHeight;    
      },
    }
}
</script>

<style>

</style>
